<template>
  <el-sub-menu :mode="mode">
    <template #title>
      {{ menuItem.name }}
    </template>
    <template v-for="item in menuItem.children">
      <template v-if="item.children && item.children.length > 0">
        <el-menu-item :index="item.path">{{ item.name }}</el-menu-item>
      </template>
      <template v-else>
        <el-menu-item :index="item.path">{{ item.name }}</el-menu-item>
      </template>
    </template>
  </el-sub-menu>
</template>

<script>
export default {
  name: 'SubMenus',
  props: {
    mode: {
      type: String,
      default: 'vertical',
    },
    menuItem: {
      type: Object,
      default: () => {
      }
    }
  }
};
</script>

